<div class="doctor-section">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h1 class="heading-title">{$config.title}</h1>
                <h4 class="sub-title">{$config.secondTitle}</h4>
            </div>
        </div>
        <div class="row dt-bottom">
            <div class="col-md-9">
                <!-- Tab panes -->
                <div class="tab-content">
                    {volist name="lists" id="data" length="1"}
                    <div role="tabpanel" class="tab-pane active" id="dr{$data.id}">
                        <div class="row">
                            <div class="col-md-4">
                                <img src="{$data.cover_id|get_cover='path'}" class="img-responsive" alt="" />
                            </div>
                            <div class="col-md-8">
                                <div class="dr-details">
                                    <h2 class="mb0">{$data.name}</h2>
                                    <h4 class="mb25"><i class="{$data.icon}"></i></h4>
                                    <p>{$data.title}</p>
                                    <a href="#" class="btn btn-default mr10">make appoinment</a> <a href="{:url('index/cate_id='.$cate_id)}" class="btn btn-primary">{$config.link}</a>
                                    <div class="dr-social-box">
                                        <ul>
                                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {/volist}
                    {volist name="lists" id="data" offset="1"}
                    <div role="tabpanel" class="tab-pane" id="dr{$data.id}">
                        <div class="row">
                            <div class="col-md-4">
                                <img src="{$data.cover_id|get_cover='path'}" class="img-responsive" alt="" />
                            </div>
                            <div class="col-md-8">
                                <div class="dr-details">
                                    <h2 class="mb0">{$data.name}</h2>
                                    <h4 class="mb25"><i class="{$data.icon}"></i></h4>
                                    <p>{$data.title}</p>
                                    <a href="#" class="btn btn-default mr10">make appoinment</a> <a href="{:url('index/cate_id='.$cate_id)}" class="btn btn-primary">{$config.link}</a>
                                    <div class="dr-social-box">
                                        <ul>
                                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {/volist}
                </div>
            </div>
            <div class="col-md-3">
                <div class="dr-tabs-box">
                    <!-- Nav tabs -->
                    <ul class="nav dr-tab" role="tablist" style="overflow: auto;max-height: 315px">
                        {volist name="lists" id="data" length="1"}
                        <li role="presentation" class="active"><a href="#dr{$data.id}" aria-controls="dr{$data.id}" role="tab" data-toggle="tab">
                            <div class="dr-box">
                                <span class="dr-img"><img src="{$data.cover_id|get_cover='path'}" class="img-responsive img-circle" alt="" /></span>
                                <table>
                                    <tr>
                                        <td><span class="dr-title">{$data.name}</span></td>
                                    </tr>
                                    <tr>
                                        <td><span class="dr-sub-title {$data.icon}"></span></td>
                                    </tr>
                                </table>
                            </div>
                        </a></li>
                        {/volist}
                        {volist name="lists" id="data" offset="1"}
                        <li role="presentation"><a href="#dr{$data.id}" aria-controls="dr{$data.id}" role="tab" data-toggle="tab">
                            <div class="dr-box">
                                <span class="dr-img"><img src="{$data.cover_id|get_cover='path'}" class="img-responsive img-circle" alt="" /></span>
                                <table>
                                    <tr>
                                        <td><span class="dr-title">{$data.name}</span></td>
                                    </tr>
                                    <tr>
                                        <td><span class="dr-sub-title {$data.icon}"></span></td>
                                    </tr>
                                </table>
                            </div>
                        </a></li>
                        {/volist}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>